<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css"
          href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    <script type="text/javascript">
        function queryDicValueByConditionForPage(pageNo, pageSize) {
            $.ajax({
                url: 'settings/dictionary/value/queryForPage',
                data: {
                    pageNo: pageNo,
                    pageSize: pageSize
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var htmlStr = "";
                    $.each(data.dicValueList, function (index, obj) {
                        htmlStr += "<tr class=\"active\">";
                        htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
                        htmlStr += "<td>" + obj.value + "</td>";
                        htmlStr += "<td>" + obj.text + "</td>";
                        htmlStr += "<td>" + obj.orderNo + "</td>";
                        htmlStr += "<td>" + obj.typeCode + "</td>";
                        htmlStr += "</tr>";
                    });
                    $("#tBody").html(htmlStr);

                    //取消"全选"按钮
                    $("#chckAll").prop("checked", false);

                    //计算总页数
                    var totalPages = 1;
                    if (data.totalRows % pageSize == 0) {
                        totalPages = data.totalRows / pageSize;
                    } else {
                        totalPages = parseInt(data.totalRows / pageSize) + 1;
                    }

                    //对容器调用bs_pagination工具函数，显示翻页信息
                    $("#demo_pag1").bs_pagination({
                        currentPage: pageNo,//当前页号,相当于pageNo

                        rowsPerPage: pageSize,//每页显示条数,相当于pageSize
                        totalRows: data.totalRows,//总条数
                        totalPages: totalPages,  //总页数,必填参数.

                        visiblePageLinks: 5,//最多可以显示的卡片数

                        showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                        showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                        showRowsInfo: true,//是否显示记录的信息，默认true--显示

                        //用户每次切换页号，都自动触发本函数;
                        //每次返回切换页号之后的pageNo和pageSize
                        onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
                            queryDicValueByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
                        }
                    });
                }
            });
        }


        //页面加载完毕
        $(function () {
            queryDicValueByConditionForPage(1, 10);

            //给"删除"按钮添加单击事件
            $("#deleteBtn").click(function () {
                var chekkedIds = $("#tBody input[type='checkbox']:checked");
                if (chekkedIds.size() == 0) {
                    alert("请选择要删除的字典值");
                    return;
                }

                if (window.confirm("确定删除吗？")) {
                    var ids = "";
                    $.each(chekkedIds, function () {//id=xxxx&id=xxx&.....&id=xxx&
                        ids += "id=" + this.value + "&";
                    });
                    ids = ids.substr(0, ids.length - 1);//id=xxxx&id=xxx&.....&id=xxx
                    //发送请求
                    $.ajax({
                        url: 'settings/dictionary/value/delete',
                        data: ids,
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == "1") {
                                alert("删除成功~")
                                queryDicValueByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                            } else {
                                //提示信息
                                alert(data.message);
                            }
                        }
                    });
                }
            });

            //给"创建"按钮添加单击事件
            $("#toAddViewBtn").click(function () {
                //重置表单
                $("#addDicValueForm")[0].reset();

                //弹出创建交易的模态窗口
                $("#addDicValueModal").modal("show");
            });

            //给"创建-保存"按钮添加单击事件
            $("#addDicValueBtn").click(function () {
                //收集参数
                var typeCode = $("#create-dicTypeCode").val();
                var value = $.trim($("#create-dicValue").val());
                var text = $.trim($("#create-text").val());
                var orderNo = $.trim($("#create-orderNo").val());


                if (typeCode == "") {
                    alert("字典类型编码不能为空");
                    return;
                }
                if (value == "") {
                    alert("字典值不能为空");
                    return;
                }
                if (text == "") {
                    alert("文本不能为空");
                    return;
                }

                //发送请求
                $.ajax({
                    url: 'settings/dictionary/value/add',
                    data: {
                        typeCode: typeCode,
                        value: value,
                        text: text,
                        orderNo: orderNo
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            $("#addDicValueModal").modal("hide");
                            queryDicValueByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            //提示信息
                            alert(data.message);
                            $("#addDicValueModal").modal("show");
                        }
                    }
                });
            });

            //给"修改"按钮添加单击事件
            $("#toUpdateDicValueBtn").click(function () {
                var chkedIds = $("#tBody input[type='checkbox']:checked");
                if (chkedIds.size() == 0) {
                    alert("请选择要修改的字典值");
                    return;
                }
                if (chkedIds.size() > 1) {
                    alert("每次只能修改一条字典值");
                    return;
                }
                var id = chkedIds[0].value;
                //发送请求
                $.ajax({
                    url: 'settings/dictionary/value/queryById',
                    data: {
                        id: id
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        //把市场活动的信息显示在修改的模态窗口上
                        $("#update-id").val(data.id);
                        $("#update-dicTypeCode").val(data.typeCode);
                        $("#update-dicValue").val(data.value);
                        $("#update-text").val(data.text);
                        $("#update-orderNo").val(data.orderNo);

                        //弹出模态窗口
                        $("#updateDicValueModal").modal("show");
                    }
                });
            });

            //给"更新"按钮添加单击事件
            $("#updateDicValueBtn").click(function () {
                //收集参数

                var id = $("#update-id").val();
                var typeCode = $("#update-dicTypeCode").val();
                var value = $.trim($("#update-dicValue").val());
                var text = $.trim($("#update-text").val());
                var orderNo = $.trim($("#update-orderNo").val());

                if (typeCode == "") {
                    alert("字典类型编码不能为空");
                    return;
                }
                if (value == "") {
                    alert("字典值不能为空");
                    return;
                }
                if (text == "") {
                    alert("文本不能为空");
                    return;
                }

                //发送请求
                $.ajax({
                    url: 'settings/dictionary/value/update',
                    data: {
                        id: id,
                        typeCode: typeCode,
                        value: value,
                        text: text,
                        orderNo: orderNo
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            //关闭模态窗口
                            $("#updateDicValueModal").modal("hide");
                            //刷新市场活动列表,保持页号和每页显示条数都不变
                            queryDicValueByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'), $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            //提示信息
                            alert(data.message);
                            //模态窗口不关闭
                            $("#updateDicValueModal").modal("show");
                        }
                    }
                });
            });
        });
    </script>

</head>
<body>
<%--创建模态框--%>
<div class="modal fade" id="addDicValueModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建字典值</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="addDicValueForm">

                    <div class="form-group">
                        <label for="create-dicTypeCode" class="col-sm-2 control-label">字典类型编码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-dicTypeCode" style="width: 200%;">
                                <option></option>
                                <c:forEach items="${dicValueList}" var="a">
                                    <option value="${a.code}">${a.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-dicValue" class="col-sm-2 control-label">字典值<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-dicValue" style="width: 200%;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-text" class="col-sm-2 control-label">文本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-text" style="width: 200%;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-orderNo" class="col-sm-2 control-label">排序号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-orderNo" style="width: 200%;">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addDicValueBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="updateDicValueModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改字典值</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <input type="hidden" id="update-id">
                    <div class="form-group">
                        <label for="update-dicTypeCode" class="col-sm-2 control-label">字典类型编码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="update-dicTypeCode" style="width: 200%;">
                                <c:forEach items="${dicValueList}" var="a">
                                    <option value="${a.code}">${a.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="update-dicValue" class="col-sm-2 control-label">字典值<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-dicValue" style="width: 200%;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="update-text" class="col-sm-2 control-label">文本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-text" style="width: 200%;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="update-orderNo" class="col-sm-2 control-label">排序号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-orderNo" style="width: 200%;">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateDicValueBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 30px; top: -10px;">
        <div class="page-header">
            <h3>字典值列表</h3>
        </div>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button type="button" class="btn btn-primary" id="toAddViewBtn"><span
                class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button type="button" class="btn btn-default" id="toUpdateDicValueBtn"><span
                class="glyphicon glyphicon-edit"></span> 编辑
        </button>
        <button type="button" class="btn btn-danger" id="deleteBtn"><span
                class="glyphicon glyphicon-minus"></span> 删除
        </button>
    </div>
</div>
<div style="position: relative; left: 30px; top: 20px;">
    <table class="table table-hover">
        <thead>
        <tr style="color: #B3B3B3;">
            <td><input type="checkbox"/></td>
            <td>字典值</td>
            <td>文本</td>
            <td>排序号</td>
            <td>字典类型编码</td>
        </tr>
        </thead>
        <tbody id="tBody">
        </tbody>
    </table>
    <div id="demo_pag1"></div>
</div>

</body>
</html>